<template>
    <div class="alphabet-wrapper">
        <div class="alphabet"
        v-for="item in alphabet"
        :key="item"
        @click="changeLetter"
        @touchstart="start"
        @touchend="end"
        @touchmove.prevent="move"
        :ref="item">
            {{item}}
        </div>
    </div>
</template>
<script>
export default {
  name: 'CityAlphabet',
  props: {
    alphabet: Array
  },
  data () {
    return {
      status: false,
      startY: 0,
      timer: null
    }
  },
  updated () {
    this.startY = this.$refs['A'][0].offsetTop
    // console.log(this.startY)
  },
  methods: {
    changeLetter: function (e) {
      let letter = e.target.innerText
      this.$emit('change', letter)
    },
    start () {
      this.status = true
      //  console.log(this.status)
    },
    end () {
      this.status = false
      //  console.log(this.status)
    },
    move (e) {
      if (this.timer) {
        this.timer = null
      } else {
        this.timer = setTimeout(() => {
          if (this.status) {
            let y = e.targetTouches[0].clientY
            let index = Math.floor((y - this.startY - 79) / 20)
            // console.log(index)
            let letter = this.alphabet[index]
            if (letter) {
              this.$emit('change', letter)
            }
          }
        }, 8)
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';
.alphabet-wrapper
    width .4rem
    position fixed
    top 1.58rem
    right 0
    bottom 0
    display flex
    flex-direction column
    justify-content center
    .alphabet
        line-height .4rem
        text-align center
        color $bgColor
</style>
